<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div class="table-search">
      <el-form :inline="true" :model="serachItem" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="serachItem.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">系统日志信息</div>
      <!-- 表格 -->
      <div class="listfile">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :height="tableHeight"
          :data="tableData">
           <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="loginBrowType" label="登录浏览器" width="160" :formatter="loginBrowTypeFormatter"></el-table-column>
          <el-table-column prop="loginIp" label="登录IP" width="140"></el-table-column>
          <el-table-column prop="loginTime" label="登录时间" width="160"></el-table-column>
          <el-table-column prop="loginUserName" label="登录用户" width="220" show-overflow-tooltip></el-table-column>
          <el-table-column prop="loginRemark" label="登录备注" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                size="mini" type="warning" icon="el-icon-edit"
                @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table_page">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>

    <!-- 子组件 -->
    <systemLogoModal ref="systemLogoModal1"></systemLogoModal>
  </div>
</template>

<script>
import { getBrowserName } from '@/utils/loginIp.js'
import { searchSystemLogo } from '@/api/systemLogo'
import systemLogoModal from './systemLogoModal.vue'
export default {
  components: {systemLogoModal},
  data() {
    return {
      tableHeight: 'calc(100vh - 296px)',
      totalCount: 0, //总条数，总共有多少条数据
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示多少条
      loading: true,
      tableData: [],
      serachItem: {
        userName: 'xiaoyi',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
    }
  },
  methods: {
    // 浏览器名称 格式化
    loginBrowTypeFormatter(row){
      // console.log('row???', row, getBrowserName(row.loginBrowType))
      if (row.loginBrowType){
        return getBrowserName(row.loginBrowType)
      }
    },

    //日志查询(条件查询接口)
    serachInfo() {
      let parmsData = {
        userName: this.serachItem.userName,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }
      //回调接口
      searchSystemLogo(parmsData).then((res)=>{
        this.tableData = [];
        if (res.statusCode == "200"){
          this.loading = false;
          console.log("搜索：", res.data)
          if (res.data.content) {
            this.tableData = res.data.content
            this.totalCount = res.data.total;
          } else {
            this.$message.warning('未查询到数据')
          }
        }
      })
    },
    // 详情
    handleDetail(index, row) {
      // console.log("编辑:", index, row);
      this.$refs.systemLogoModal1.modal1 = true;
      this.$refs.systemLogoModal1.titles = '系统日志详情';
      this.$refs.systemLogoModal1.formData = JSON.parse(JSON.stringify(row));
      this.$refs.systemLogoModal1.formData.loginBrowType = getBrowserName(row.loginBrowType)
    },
    // 分页
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.serachInfo()
    },
    //每页
    handleSizeChange(val) {
      this.pageSize = val
      this.serachInfo()
    },
  },
  created(){},
  mounted(){
    this.serachInfo();
  },
  destroyed() {
    this.$destroy();
    this.tableData = [];
    this.page_Data = [];
  }
}
</script>
